<template>
    <view class="w100">
        <!-- 底部内容固定高度 -->
        <view class="height"></view>
        <!-- 固定悬浮底部  -->
        <view class="foot w100" :class="{ shadow: !specShow }">
            <view class="height space-between align-center pl-30 pr-30">
                <view class="integral ft-24 flex-auto">
                    <text class="ft-40 mr-6">2000</text>积分
                </view>
                <hj-login @click="handleExchange" @init="handleExchange">
                    <view class="center exchange t-w ft-28 br-44"> 立即兑换 </view>
                </hj-login>
            </view>
            <!-- ios x以上机型底部安全高度 -->
            <hj-safe-footer />
        </view>
        <!-- 规格选择弹窗 -->
        <view class="spec-mask full" @click="specShow = false" v-if="specShow"></view>
        <view class="spec w100 over-auto-y" :class="{ specShow: !specShow }">
            <view class="close" @click="specShow = false">
                <hj-image width="40rpx" height="40rpx" src="close-01.png" />
            </view>
            <!-- 商品信息 -->
            <view class="flex p-30 pr-50 mb-20">
                <view class="br-16 over-hide">
                    <hj-image
                        width="180rpx"
                        height="180rpx"
                        mode="aspectFill"
                        img="https://ai-app01.oss-cn-guangzhou.aliyuncs.com/mpweixin/drone/data-bg.jpg"
                    />
                </view>
                <view class="flex-auto pl-24 pt-6 pb-6 t-3 column space-between">
                    <view class="ft-28 break-all text-over-2 info-title">
                        大疆DJI Mini 4K 超高清迷你航拍无人机 三轴机械增稳数字图传 新手入门级别
                    </view>
                    <view class="mt-16 ft-26"> <text class="mr-6">2000</text>积分 </view>
                </view>
            </view>
            <!-- 商品规格 -->
            <view class="pr-30 pl-10">
                <view v-for="item in specData" :key="item.id">
                    <view class="spec-title ft-28 t-3 mb-6 pl-20 line-height1">
                        {{ item.title }}
                    </view>
                    <view class="spec-list flex-wrap">
                        <view
                            class="spec-list-item ft-28 t-6 center"
                            :class="{ select: spec.id == 101 || spec.id == 201 }"
                            v-for="spec in item.list"
                            :key="spec.id"
                            @click="handleSelect(spec)"
                        >
                            <text class="text-left">{{ spec.name }}</text>
                        </view>
                    </view>
                </view>
            </view>
            <view class="w100 space-between align-center pl-30 pr-30 mb-40 pt-20">
                <view class="ft-28 t-3">数量</view>
                <NumberBox :value="count" @change="change" />
            </view>
            <!-- 安全高度 -->
            <view class="height"></view>
            <!-- ios x以上机型底部安全高度 -->
            <hj-safe-footer />
        </view>
    </view>
</template>

<script setup>
/**
 * @description 商品底部
 * @author yinzhi
 * @date 2025-03-19
 */
import { ref, defineComponent } from 'vue'
import { logger } from '@/utils/log.js'
import NumberBox from './NumberBox.vue'
defineComponent({
    name: 'GoodsFoot',
    components: {
        NumberBox
    }
})

const props = defineProps({
    // 商品信息
    info: {
        type: Object,
        default: () => {}
    },
    // 兑换数量
    count: {
        type: Number,
        default: 1
    }
})

// 规格弹窗显示状态
const specShow = ref(false)
// 是否允许点击兑换按钮 而不是打开规格弹窗
const allowExchange = ref(true)

// 立即兑换
const handleExchange = async () => {
    if (!specShow.value) {
        specShow.value = true
        return
    }
    // 防止重复点击
    if (!allowExchange.value) {
        return
    }
    allowExchange.value = false
    try {
        uni.showToast({
            title: '兑换成功',
            duration: 2000
        })
        specShow.value = false
        // 兑换成功后跳转到订单列表页
        let time = setTimeout(() => {
            uni.redirectTo({
                url: '/pages/order/order-list/index'
            })
            time && clearTimeout(time)
        }, 1000)
    } catch (error) {
        allowExchange.value = true
        logger.error({ '[handleExchange]-立即兑换失败：': error })
    }
}

// 规格选择事件 后续根据接口字段再来写切换逻辑
const handleSelect = spec => {
    logger.log(spec)
}

// 选中的规格
const selectedSpec = ref([
    { id: 10, spec: 101 },
    { id: 20, spec: 201 }
])
// 写死的规格数据
const specData = [
    {
        id: 10,
        title: '颜色',
        list: [
            { id: 101, name: '珍珠白' },
            { id: 102, name: '土豪金' },
            { id: 103, name: '五彩黑' },
            { id: 104, name: '炫彩紫红' }
        ]
    },
    {
        id: 20,
        title: '套餐',
        list: [
            { id: 201, name: '标准套餐' },
            { id: 202, name: '旅拍套餐' },
            { id: 203, name: '亲子套餐' }
        ]
    }
]

const emit = defineEmits()
const change = value => {
    emit('change', value)
}
</script>

<style scoped lang="scss">
.spec-list {
    margin-bottom: 40rpx;
    &-item {
        min-width: calc((100% - 60rpx) / 3);
        line-height: 1.3;
        border: 1px solid #e9e9e9;
        padding: 10rpx 20rpx;
        margin: 16rpx 0 0 20rpx;
        min-height: 72rpx;
        border-radius: 8rpx;
    }
    .select {
        border-color: #e51c23;
        color: #e51c23;
    }
}
.spec {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 80;
    background: #fff;
    border-radius: 30rpx 30rpx 0 0;
    max-height: 70vh;
    transition: all 300ms;
    .close {
        position: absolute;
        top: 16rpx;
        right: 16rpx;
        z-index: 10;
    }
    .info-title {
        line-height: 40rpx;
        max-height: 76rpx;
    }
}
.specShow {
    bottom: -100vh;
}
.spec-mask {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 70;
    background: rgba($color: #000000, $alpha: 0.6);
}
.foot {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 90;
    background: #fff;
    border-top: 1px solid #f1f1f1;
    .integral {
        color: #e51c23;
    }
    .exchange {
        height: 80rpx;
        width: 220rpx;
        background: #e51c23;
    }
}
.shadow {
    border-color: #fff;
    box-shadow: 0 0 8rpx 0 rgba($color: #000000, $alpha: 0.1);
}
.height {
    height: 114rpx;
}
</style>
